<template>
  <el-row :gutter="10">
    <el-col :span="12">
      {{current.menuInfo.menuId}}.json 
      <el-button type="" @click="downJson">下载</el-button>
      <el-button type="" @click="uploadDoc">导出</el-button>
      <el-input
        v-model="docInfo"
        v-bind="tempProps"
      ></el-input>
    </el-col>
    <el-col :span="12">
      MarkDown：
      <el-button type="" @click="downMD">下载</el-button>
      <el-input
        v-model="current.docInfo.md"
        v-bind="tempProps"
      ></el-input>
    </el-col>
  </el-row>
</template>

<script>
  import { computed } from 'vue'
  import { ElInput, ElRow, ElCol, ElButton } from 'element-plus'
  // 状态
  import { store } from '@naturefw/nf-state'
  // 上传
  import upload from '../service/upload.js'
  // 下载
  import myDown from '../service/download.js'

  const tempProps = {
    // autosize: true,
    rows: 40,
    type: "textarea",
    placeholder: "下载内容"
  }


</script>

<script setup>
  
  const props = defineProps({
    menuList: Object
  })

  const current = store.current

  // json格式的文档
  const docInfo = computed(() => JSON.stringify(current.docInfo, null, 2))

  // 下载json文件
  const downJson = () => {
    //encodeURIComponent解决中文乱码
    const uri = 'data:text/json;charset=utf-8,\ufeff' + encodeURIComponent(docInfo.value)
    myDown(uri, `${current.menuInfo.menuId}.json`)
  }
  // 下载纯 md 文件
  const downMD = () => {
    //encodeURIComponent解决中文乱码
    const uri = 'data:text/json;charset=utf-8,\ufeff' + encodeURIComponent(current.docInfo.md)
    // 获取菜单名称
    myDown(uri, `${current.menuInfo.menuId}.md`)
  }
  
  // 上传文档
  const uploadDoc = () => {
    const file = {
      name: `${current.menuInfo.menuId}.json`,
      doc: docInfo.value
    }
    upload('doc', file)
  }
  
</script>